import React , { useContext } from 'react'
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import HomeIcon  from '@mui/icons-material/Home';
import Person  from '@mui/icons-material/Person';
import Paper from '@mui/material/Paper';
import {  useNavigate, Outlet   } from 'react-router-dom';
import { useSelector,   useDispatch } from 'react-redux'


export default function Tabbar() {
    const path = useSelector(state => state.path);
    const dispatch = useDispatch()
    const navigate = useNavigate();
    return (
        <>
            <Outlet></Outlet>
            <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={2}>
            <BottomNavigation
                showLabels={false}
                value={path}
                onChange={(event, newValue) => {
                navigate(newValue);
                dispatch({type: 'changePath',path: newValue});
                }}
            >
                <BottomNavigationAction value="/index/home" label="主页" icon={<HomeIcon  />} />
                <BottomNavigationAction value="/index/my"  label="我的" icon={<Person  />} />
            </BottomNavigation>
            </Paper>
        </>
    )
}
